<template>
	<view class="container">
		<view class="navlist u-flex u-col-center u-row-between">
			<view class="item" :class="{ on: navindex == item.type }" v-for="(item, index) in navlist" :key="index" @click="change(item)">
				{{ item.name }}
			</view>
		</view>
		<view class="list">
			<view class="item u-flex u-col-top u-row-between" v-for="(item, index) in list" :key="index">
				<view class="l">
					<!-- '类型 1充值 2发布报价 3报价审核驳回 4查看报价结果', -->
					<view class="t" v-if="item.type == 1">充值商人币</view>
					<view class="t" v-if="item.type == 2">发布报价</view>
					<view class="t" v-if="item.type == 3">报价审核驳回</view>
					<view class="t" v-if="item.type == 4">查看报价</view>
					<view class="t" v-if="item.type == 5">删除报价</view>
					<view class="t" v-if="item.type == 6">平台增加</view>
					<view class="t" v-if="item.type == 7">平台扣除</view>
					<view class="t" v-if="item.type == 8">查看出价</view>

					<view class="time" v-if="[1, 6, 7].includes(item.type)">订单号：{{ item.orderno }}</view>
					<view class="time" v-else>报价ID：{{ item.orderno || '' }}</view>

					<view class="time" v-if="item.remark">
						{{ item.remark }}
					</view>
					<view class="time">
						{{ item.createTime | formatISODate }}
					</view>
				</view>
				<view class="r">
					<view class="p1">
						<text class="t1" v-if="[1, 3, 5, 6].includes(item.type)">+</text>
						<text class="t1" v-else>-</text>
						<text class="t2" v-if="navindex == 1">{{ item.price }}</text>
						<text class="t2" v-else>{{ item.coin }}</text>
						<text class="t3">币</text>
					</view>
					<view class="p2" v-if="navindex == 1">实付：￥{{ item.price }}</view>
					<view class="p2" v-else>余额：{{ item.newcoin }}币</view>
				</view>
			</view>

			<view class="nolist" v-if="nolist">
				<image src="/static/kong2.png" mode="aspectFill"></image>
				<text>暂无信息</text>
			</view>
		</view>
	</view>
</template>

<script>
import { coinRecordList } from '@/common/http.api.js';
export default {
	data() {
		return {
			navlist: [
				{
					name: '全部',
					type: 0
				},
				{
					name: '充值记录',
					type: 1
				},
				// {
				// 	name: '发布报价',
				// 	type: 2
				// },
				{
					name: '审核驳回',
					type: 3
				},
				{
					name: '查看报价',
					type: 4
				},
				{
					name: '删除报价',
					type: 5
				},
				// {
				// 	name: '平台增加',
				// 	type: 6
				// },
				// {
				// 	name: '平台扣除',
				// 	type: 7
				// }
				{
					name: '查看出价',
					type: 8
				}
			],
			navindex: 0,
			list: [],
			params: {
				page: 1,
				limit: 10,
				tab: 0
			},
			nolist: false
		};
	},
	onLoad() {
		this.getlist();
	},
	onReachBottom() {
		this.params.page++;
		this.getlist();
	},
	methods: {
		getlist() {
			this.params.tab = this.navindex;
			coinRecordList(this.params).then((res) => {
				if (res.code == 200) {
					this.list.push(...res.data.list);
					let total = Math.ceil(res.data.total / this.params.limit);
					this.nolist = total == 0;
				}
			});
		},
		change(item) {
			if (this.navindex != item.type) {
				this.navindex = item.type;
				this.list = [];
				this.params.page = 1;
				this.getlist();
			}
		}
	}
};
</script>

<style lang="scss">
$color: #ff6f07;

page {
	background-color: #fff !important;
}

.container {
	.navlist {
		position: sticky;
		top: 0;
		height: 80rpx;
		line-height: 80rpx;
		width: 100%;
		background-color: #fff;
		z-index: 999;
		border-bottom: 2rpx solid #eee;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;

		/* 优化移动端滚动体验（平滑滚动） */
		.item {
			min-width: 120rpx;
			display: inline-block;
			margin-right: 20rpx;
			text-align: center;
			font-size: 28rpx;
			color: #8e8e8e;
		}

		.on {
			color: $color;
			font-weight: 600;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				width: 48rpx;
				height: 4rpx;
				background: $color;
				border-radius: 2rpx;
				margin-left: -24rpx;
			}
		}
	}

	.nolist {
		padding: 100rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;

		image {
			width: 160rpx;
			height: 136rpx;
		}

		text {
			font-size: 24rpx;
			color: #999;
			margin-top: 20rpx;
		}
	}

	.list {
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		.item {
			border-bottom: 2rpx solid #eee;
			padding: 30rpx 0;

			.l {
				flex: 1;
				width: 1rpx;
				margin-right: 20rpx;

				.t {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
					height: 60rpx;
					line-height: 60rpx;
				}

				.time {
					margin-top: 10rpx;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					color: #979797;
				}
			}

			.r {
				text-align: right;

				.p1 {
					height: 60rpx;
					line-height: 60rpx;

					text {
						color: #000;
					}

					.t1 {
						font-weight: bold;
						font-size: 30rpx;
					}

					.t2 {
						font-weight: 600;
						font-family: 'DIN';
						font-size: 40rpx;
						padding: 0 5rpx;
					}

					.t3 {
						font-size: 28rpx;
					}
				}

				.p2 {
					line-height: 40rpx;
					height: 40rpx;
					margin-top: 10rpx;
					font-size: 28rpx;
					color: #979797;
					text-align: right;
				}
			}
		}
	}
}
</style>
